<template>
  <div class="body_all">
    <div class="ba_top">
      <div>
        <el-input
          style="width:15%;"
          class="nameInput"
          v-model="searchList.kw"
          placeholder="姓名/电话/所属公司"
          size="mini"
        ></el-input>
        <el-button
          style="margin-left: 8px"
          type="primary"
          icon="el-icon-search"
          @click="btnSearch"
          size="mini"
          >搜索</el-button
        >
        <el-button
          type="refresh"
          icon="el-icon-refresh"
          @click="btnRefresh"
          size="mini"
          >重置</el-button
        >
      </div>
      <div style="margin-top: 8px">
        <div style="float: left">
          <el-button
            :disabled="!(multipleSelection && multipleSelection.length !== 0)"
            type="danger"
            size="mini"
            class="el-icon-delete"
            @click="delForm()"
            >删除</el-button
          >
          <el-button
            :disabled="!(multipleSelection && multipleSelection.length !== 0)"
            type="primary"
            size="mini"
            @click="enterSea()"
            >放入公海</el-button
          >
        </div>
        <div style="float: right">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="showEditer(0, '')"
            >新增联系人</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="showFollow(0, '')"
            >新增跟进信息</el-button
          >
        </div>
        <!-- <el-button
          :disabled="!multipleSelection"
          type="edit"
          icon="el-icon-edit-outline"
          size="mini"
          @click="showEditer(1)"
          >编辑</el-button
        > -->
        <!-- <el-button type="down" size="mini">模板下载</el-button>
        <el-button type="import" icon="el-icon-download" size="mini"
          >导入</el-button
        >
        <el-button type="out" icon="el-icon-upload2" size="mini"
          >导出</el-button
        >
        <el-button type="check" icon="el-icon-document-copy" size="mini"
          >查重</el-button
        >
        <el-button
          :disabled="!multipleSelection"
          type="return"
          icon="iconfont icon-fanhui1"
          size="mini"
          @click="dialogGh = true"
          >退回公海</el-button
        > -->
      </div>
    </div>
    <div class="ba_main">
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        height="250"
        tooltip-effect="dark"
        style="width: 100%"
        class="ellipsis"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="姓名" width="180" fixed>
          <template slot-scope="scope">
            <div class="edit_btn" @click="details(scope.row)">
              <span :title="scope.row.name">{{
                scope.row.name !== ""
                  ? scope.row.name +
                    (scope.row.external_userid !== "" ? "@微信" : "")
                  : "--"
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="200" label="电话">
          <template slot-scope="scope">
            <span :title="scope.row.phone">{{
              scope.row.phone !== "" ? scope.row.phone : "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column width="200" label="所属公司">
          <template slot-scope="scope">
            <span :title="scope.row.customer_name">{{
              scope.row.customer_name !== "" ? scope.row.customer_name : "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column width="260" label="地址" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :title="scope.row.address">{{
              scope.row.address !== "" ? scope.row.address : "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column width="80" label="性别">
          <template slot-scope="scope">
            <span>{{ scope.row.sex == "1" ? "男" : "女" }}</span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="职务">
          <template slot-scope="scope">
            <span :title="scope.row.position">{{
              scope.row.position !== "" ? scope.row.position : "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="标签">
          <template slot-scope="scope">
            <span :title="scope.row.tag_name">{{
              scope.row.tag_name !== "" ? scope.row.tag_name : "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column width="200" label="来源" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :title="scope.row.source_title">{{
              scope.row.source_title !== "" ? scope.row.source_title : "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column width="200" label="微信号">
          <template slot-scope="scope">
            <span :title="scope.row.wx">{{
              scope.row.wx !== "" ? scope.row.wx : "--"
            }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="date" label="创建人"> </el-table-column> -->
        <el-table-column width="170" label="创建时间">
          <template slot-scope="scope">
            <span :title="scope.row.add_time">{{
              scope.row.add_time !== "" ? scope.row.add_time : "--"
            }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="address" label="跟进人" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="date" label="共享人"> </el-table-column>
        <el-table-column prop="date" label="跟进状态"> </el-table-column>
        <el-table-column prop="name" label="跟进记录"> </el-table-column> -->
        <!-- <el-table-column
          prop="address"
          label="销售机会金额"
          show-overflow-tooltip
        >
        </el-table-column> -->
      </el-table>
      <div class="footer">
        <span style="margin-right: 10px">共{{ datanumber }}条</span>
        <!-- <span>当前第{{ searchList.page }}页共有{{ tableData.length }}条</span> -->
        <span :class="searchList.page == 1 ? 'ban_btn_no' : ''">
          <i
            class="el-icon-arrow-left operable"
            :class="searchList.page == 1 ? 'pageOff' : 'pageOn'"
            @click="prevPage"
          ></i>
        </span>
        <div style="display: inline; margin: 0 10px">
          <el-input
            :title="searchList.page"
            style="width: 60px"
            v-model="searchList.page"
            @change="sizechange()"
            size="mini"
          ></el-input>
          <span style="margin: 0 5px 0 15px">/</span>
          <span>{{ pagenumber == 0 ? "1" : pagenumber }}</span>
        </div>
        <span :class="seenumber > datanumber ? 'ban_btn_no' : ''">
          <i
            class="el-icon-arrow-right operable"
            :class="seenumber > datanumber ? 'pageOff' : 'pageOn'"
            @click="nextPage"
          ></i>
        </span>
        <span style="margin-left: 10px">每页</span>
        <el-select
          style="width: 70px"
          v-model="searchList.size"
          @change="sizechange()"
          placeholder="请选择"
          size="mini"
        >
          <el-option
            v-for="item in sizennList"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
        条
      </div>
    </div>
    <!-- 退回公海 -->
    <el-dialog
      title="退回公海"
      :close-on-click-modal="false"
      :visible.sync="dialogGh"
      width="45%"
      :close-on-press-escape="false"
    >
      <el-form
        :model="ghForm"
        :rules="rulesGh"
        ref="ghForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="放弃原因" prop="reason">
          <el-select v-model="ghForm.reason" placeholder="请选择放弃原因">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="foot_btn">
        <el-button @click="resetGh('ghForm')">取消</el-button>
        <el-button type="primary" @click="submitGh('ghForm')">提交</el-button>
      </div>
    </el-dialog>
    <contacts ref="contacts" :detailsData="detailsData" :start="0"></contacts>
    <followup ref="followup" :start="0"></followup>
    <detailscontacts
      ref="detailscontacts"
      :parentdetails="detailsId"
      :isreturn="0"
    ></detailscontacts>
  </div>
</template>

<script>
import { addAbortSignal } from "stream";
import contacts from "../pageWorld/addCustomerData.vue";
import followup from "../pageWorld/addFollowUp.vue";
import detailscontacts from "../pageWorld/detailsContacts.vue";
export default {
  components: {
    contacts,
    followup,
    detailscontacts,
  },
  data() {
    return {
      loading: false,
      cDetails: false,
      detailsData: [],
      detailsId: "",
      sizennList: [{ value: 20 }, { value: 50 }, { value: 100 }],
      // 搜索条件
      searchList: {
        size: "20",
        kw: "",
        page: 1,
      },
      datanumber: "0",
      seenumber: "0",
      pagenumber: "0",
      multipleSelection: "",
      // 退回公海
      dialogGh: false,
      ghForm: {
        reason: "",
      },
      rulesGh: {
        reason: [
          { required: true, message: "请选择放弃原因", trigger: "change" },
        ],
      },
      tableData: [],
    };
  },
  created() {
    this.loading = true;
    this.getData();
  },
  methods: {
    // 左侧选中数据
    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.detailsData.share_user.push(data);
      } else {
        for (let i = 0; i < this.detailsData.share_user.length; i++) {
          if (this.detailsData.share_user[i].id == data.id) {
            this.detailsData.share_user.splice(i, 1);
          }
        }
      }
    },
    // 获取列表数据
    getData() {
      let that = this;
      this.$cmsapi.contactsList(that.searchList).then(
        (res) => {
          if (res.code == 0) {
            for (let i = 0; i < res.data.length; i++) {
              for (const key in res.data[i]) {
                if (!res.data[i][key] && res.data[i][key] !== 0) {
                  res.data[i][key] = "";
                }
              }
            }
            that.seenumber = that.searchList.size * that.searchList.page;
            that.datanumber = res.count;
            that.pagenumber = Math.ceil(res.count / that.searchList.size);
            that.tableData = res.data;
          } else {
            that.$message.error(res.msg);
          }
          that.loading = false;
        },
        (err) => {
          console.log(err);
          that.loading = false;
        }
      );
    },
    // 最大条数变化
    sizechange() {
      this.loading = true;
      this.getData();
    },
    //上一页
    prevPage() {
      this.loading = true;
      this.searchList.page -= 1;
      this.getData();
    }, // 下一页
    nextPage() {
      this.loading = true;
      this.searchList.page += 1;
      this.getData();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 搜索
    btnSearch(){
      this.loading = true;
      this.getData();
    },
    // 条件重置
    btnRefresh() {
      this.searchList = this.$options.data().searchList;
      this.loading = true;
      this.getData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 查看详情
    details(obj) {
      this.detailsId = obj.id;
      this.$refs.detailscontacts.cDetails = true;
    },
    // 新增编辑
    showEditer(index, obj) {
      if (index == 0) {
        this.detailsData = this.$options.data().detailsData;
      }
      this.$refs.contacts.drawer = true;
    },
    // 新增跟进信息
    showFollow(obj) {
      this.$refs.followup.drawer = true;
    },
    // 退回公海
    submitGh(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.dialogGh = false;
          this.ghForm = this.$options.data().ghForm;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetGh(formName) {
      this.$refs[formName].resetFields();
      this.dialogGh = false;
      this.ghForm = this.$options.data().ghForm;
    },
    // 放入公海
    enterSea(){
      this.$confirm("此操作会将数据退回公海, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          let langT = this.multipleSelection.length - 1;
          for (let i = 0; i < this.multipleSelection.length; i++) {
            this.$cmsapi.putOpenSea(this.multipleSelection[i].id).then(
              (res) => {
                if (res.code !== 0) {
                  this.$message.error(res.msg);
                  this.loading = false;
                  return;
                }
                if (i == langT) {
                  this.$message({
                    type: "success",
                    message: "成功放入公海",
                  });
                  this.getData();
                }
              },
              (err) => {
                console.log(err);
              }
            );
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    // 删除
    delForm() {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          let langT = this.multipleSelection.length - 1;
          for (let i = 0; i < this.multipleSelection.length; i++) {
            this.$cmsapi.contactsDel(this.multipleSelection[i].id).then(
              (res) => {
                if (res.code !== 0) {
                  this.$message.error(res.msg);
                  this.loading = false;
                  return;
                }
                if (i == langT) {
                  this.$message({
                    type: "success",
                    message: "删除成功",
                  });
                  this.getData();
                }
              },
              (err) => {
                console.log(err);
              }
            );
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style scoped>
#addComphone,
#addPhone,
#removePhone {
  cursor: pointer;
}

/deep/ .el-drawer__header {
  margin-bottom: 20px !important;
}
.drawer_pad,
.el-descriptions,
/deep/ .el-step__title {
  font-size: 12px;
}
/deep/ .el-step__main {
  white-space: inherit;
  margin-right: 100px;
}
/deep/ .el-tabs__header {
  margin: 0;
}
</style>